
<template>
    <div>
        <codemirror v-model="props.jsonExample" :extensions="extensions" :option="cmOptions" :style="state.codeStyle" />
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { Codemirror } from 'vue-codemirror'
// import { oneDark } from '@codemirror/theme-one-dark'
import { json } from '@codemirror/lang-json'

let props = defineProps(['jsonExample'])
let $emit = defineEmits(['importJsonData'])
// const extensions = [json(), oneDark]
const extensions = [json()]
const state = reactive({
  selectValue: 1,
  codeStyle: { height: '600px', marginTop: '10px' }
})
// 如果需要在组件内实时格式化JSON，可以添加一个watcher
// 注意：频繁格式化可能导致性能问题，仅在必要时使用
// watch(rawJson, () => {
//   jsonExample.value = JSON.stringify(rawJson.value, null, 2);
// });
const cmOptions = {
  lineWrapping: true,
  scrollbarStyle: 'overlay',
  theme: 'material'
}
</script>


